<template>
  <div class="flowArea" :style="cDoneHeight">
    <portalTab :tabData="tabData" :tabValue="tabValue" @click="clickFun" @iconClick="iconClickFun">
      <template :slot="tabValue">
        <FlowToDoTable
          v-if="cIsHaveModelValue"
          @tableMount="tableMountFun"
          :height="height"
          :params="cParams"
          :name="tabValue"
        ></FlowToDoTable>
      </template>
    </portalTab>
  </div>
</template>

<script>
import portalTab from "@/components/portalTab";
import FlowToDoTable from "../components/FlowToDoTable";
import { createParams } from "./utils";
// "#e73b44"

export default {
  name: "flowArea",
  props: {
    height: {
      type: [Number, String],
      default: "100%"
    }
  },
  components: {
    portalTab,
    FlowToDoTable
  },
  computed: {
    cDoneHeight () {
      let height = this.height.toString();
      return {
        height: height.indexOf("%") > -1 ? this.height : height + "px"
      };
    },
    cIsHaveModelValue () {
      let arr = this.tabData.map(v => v.name);
      return arr.includes(this.tabValue);
    },
    cParams () {
      return createParams(this.tabValue);
    }
  },
  methods: {
    clickFun (tabValue) {
      this.tabValue = tabValue;
    },
    iconClickFun () {
      // this.dialogVisible = true;
      this.$router.push({ path: "/dashboard/personal/flowBussiness" });
    },
    tableMountFun ({ data, name }) {
      let currentTabData = this.tabData.find(v => v.name === name) || {};
      if (currentTabData.number === 0) {
        this.$set(currentTabData, "number", data.length);
      }
    }
  },
  data () {
    return {
      status: status,
      tabValue: "FlowToDoTable",
      dialogVisible: false,
      tabData: [
        { id: 1, label: "流程待办", name: "FlowToDoTable", number: 0 },
        { id: 2, label: "流程已办", name: "FlowDoneTable" },
        { id: 3, label: "知会待办", name: "notifyDone", number: 0 },
        { id: 4, label: "知会已办", name: "notifyNotDone" }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
}
.triangle {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  .borderColor(border-left-color);
  top: 1px;
  display: inline-block;
}
.doneIcon {
  position: relative;
  left: -1px;
  top: 1px;
}
.doneTable {
  /deep/ .portalTab {
    height: 100%;
    .el-tabs__header {
      background: #ffffff;
    }
  }
}
</style>